<template>
  <div class="y-history claim_div">
    <div style="display: flex">
      <h3 class="h3">信息中心</h3>
      <h3 v-if="title" class="h3">></h3>
      <h3 v-if="title" class="h3">{{ title }}</h3>
    </div>

    <div style="height: 35px">
      <a-button v-if="isshow" type="primary" style="float: right" @click="newClaim">新建申领</a-button>
      <a-button type="reset" style="float: right" v-if="istable" @click="newClaimA">返回列表</a-button>
      <a-button type="reset" style="float: right" v-if="isdetail" @click="backTable">返回列表</a-button>
    </div>
    <div v-if="isshow">
      <div style="display: flex;justify-content: space-between;align-items: center;">
        <ul class="tags" style="display: flex">
          <li v-for="(i, index) in tags" @click="changeTag(index, i)" :key="index" class="changetags" :class="{ ischange: ischange == index }">
            {{ i.name }}
          </li>
        </ul>
        <a-form-model :model="form" :colon="false" :labelCol="{ span: 6 }" :wrapper-col="{ span: 17 }" style="margin: 10px 0;">
          <a-row v-if="ischange != 3">
            <a-col>
              <a-form-model-item label="关键字" class="from-item__class">
                <a-input v-model="procurementList.searchKey" placeholder/>
                <span style="cursor: pointer;position: absolute;height: 100%;font-size: 20px;right: 5px;text-align: center;">
                  <a-icon @click="searchKey" type="search" style="color: #37ddc0"/>
                </span>
              </a-form-model-item>
            </a-col>
          </a-row>
              <div @click="exportExcel" class="from-item__class" style="cursor: pointer;width: 150px" v-else-if="ischange == 3">
                <a-form-model-item class="from-item__class" style="font-size: 16px;float: right;white-space:nowrap">
                  <a-icon type="cloud-download" style="color: #fff"/>
                  导出数据
                </a-form-model-item>
              </div>
        </a-form-model>
      </div>

      <div class="tableclass">
        <a-table :data-source="pending" :pagination="false" :columns="columns" :rowKey="(record) => record.id">
          <template slot="action" slot-scope="text, record">
            <a class="solvebtn" @click="getDetail(record)">详细信息</a>
            <a v-if="record.isAudit == 1 &&(record.status == 0 || record.status == 1)" class="solvebtn" @click="changeDate(record)">修改</a>
            <a v-if="record.status == 6" class="solvebtn" @click="buyBtn(record)">采购入库</a>
            <!--  && record.isAudit == 4 -->
            <a v-if="(record.status == 0 && record.isAudit == 2) ||(record.status == 2 && record.isAudit == 3)" class="solvebtn" @click="examineBtn(record)">审核</a>
            <a-popconfirm title="确定删除?" ok-text="确认" cancel-text="取消" @confirm="deleteBtn(record)">
              <a v-if="record.isAudit == 1 && ischange==0" class="solvebtn">删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <div class="content-bottom clearfix">
          <div class="page-box">
            <a-pagination :show-total="(total) => `共 ${totalA} 条记录`" v-model="procurementList.currentPage" :total="totalA" :defaultPageSize="procurementList.pageSize" :item-render="itemRender" @change="pagechangeFn"/>
          </div>
        </div>
      </div>
    </div>
    <div v-if="istable">
      <h3 style="color: #37ddc0; width: 100%; text-align: center; margin: 15px 0">申请物资采购清单</h3>
      <div style="position: relative;min-height: 50vh">
        <a-table bordered :data-source="dataSource" :pagination="false" :columns="columnsA" :rowKey="(record) => record.key" :scroll="{ y: 300 }">
          <template slot-scope="text, record" slot="name">
            <auto-input v-if="autoDataSourceShow" :isDisabled="isDisabled" class="input_style" :autoDataSourceInfo="autoDataSource" :valueInfo="record.name" @change="oninput(record.key, 'name', $event)"/>
          </template>
          <template slot-scope="text, record" slot="version">
            <editable-cell :isDisabled="isDisabled" v-if="autoDataSourceShow" :text="text" :value="record.version" @change="oninput(record.key, 'version', $event)"/>
            <!-- <button>1111</button> -->
          </template>
          <template slot-scope="text, record" slot="code">
            <editable-cell :isDisabled="isDisabled" v-if="autoDataSourceShow" :text="text" :value="record.code" @change="oninput(record.key, 'code', $event)"/>
            <!-- <button>1111</button> -->
          </template>
          <template slot-scope="text, record" slot="brand">
            <editable-cell :isDisabled="isDisabled" :text="text" @change="oninput(record.key, 'brand', $event)"/>
          </template>
          <template slot-scope="text, record" slot="number">
            <editable-cell :isDisabled="isDisabled" :text="text" @change="oninput(record.key, 'number', $event)"/>
          </template>
          <template slot-scope="text, record" slot="typeId">
            <a-select :disabled="isDisabled" @change="oninput(record.key, 'typeId', $event)" style="width: 100%" :default-value="record.typeId">
              <a-select-option v-for="(item, index) in leixing" :key="index" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </template>
          <!--                    <template slot-scope="text, record" slot="deptName">-->
          <!--                        <editable-cell-->
          <!--                                :text="text"-->
          <!--                                @change="oninput(record.key, 'deptName', $event)"-->
          <!--                        />-->
          <!--                    </template>-->
          <template slot-scope="text, record" slot="useTime">
            <a-date-picker :disabled="isDisabled" @change="oninput(record.key, 'useTime', $event)" :default-value="record.useTime"/>
          </template>
          <template slot-scope="text, record" slot="useDept">
            <editable-cell :isDisabled="isDisabled" :text="text" @change="oninput(record.key, 'useDept', $event)"/>
          </template>
          <template slot-scope="text, record" slot="unit">
            <editable-cell :isDisabled="isDisabled" v-if="autoDataSourceShow" :text="text" :value="record.unit" @change="oninput(record.key, 'unit', $event)"/>
          </template>
          <template slot="notes" slot-scope="text, record,index">
            <editable-cell :isDisabled="isDisabled" :text="text" @change="oninput(record.key, 'notes', $event)"/>
            <a-popconfirm v-if="dataSource.length" title="确认删除?" @confirm="() => onDelete(record.key,index)">
              <a href="javascript:;" class="deleteBtn" v-show="isshow_add">x</a>
            </a-popconfirm>
          </template>
        </a-table>
        <a-button style="position: absolute; bottom: -30px; left: 48.5%" type="primary" v-if="isshow_add" @click="addNew">+</a-button>
      </div>
      <div class="bootom_btn">
        <!-- <a-button type="primary" @click="sureLoad"> 存为草稿 </a-button> -->
        <a-button class="btn" type="primary" @click="sureLoad" v-show="isshow_info">确认上报</a-button>
        <a-button class="btn" type="reset" @click="clearClaim" v-show="isshow_add">重新填写</a-button>
      </div>
      <div v-show="isshow_applyinfo">
        <!-- 申请流程信息展示 -->
        <div class="pollutionForm" style="font-size: 15px;color: #9fb043;padding: 10px;">
          <ul class="detailsul">
<!--            class="clearfix"-->
            <template v-for="(item, index) in lclist">
              <li class="detailsli">
                <div style="margin: 15px">
                  <div>审核人: {{ item.nickname }}</div>
                  <div>审核时间: {{ item.time }}</div>
                  <div style="max-height: 100px;">
                    审核信息: {{ item.remark }}
                  </div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <div v-if="isdetail">
      <h3 style="color: #37ddc0; width: 100%; text-align: center; margin: 15px 0">申请物资采购清单</h3>
      <div style="position: relative;min-height: 50vh">
        <a-table bordered :data-source="detaildata" :pagination="false" :columns="columnsA" :rowKey="(record) => record.id" :scroll="{ y: 500 }"></a-table>
        <!-- <div class="content-bottom clearfix">
          <div class="page-box">
            <a-pagination
              :show-total="(total) => `共 ${totalA} 条记录`"
              v-model="procurementList.currentPage"
              :total="totalA"
              :defaultPageSize="procurementList.pageSize"
              :item-render="itemRender"
              @change="detailpagechange"
            />
          </div>
        </div> -->
      </div>
    </div>
    <a-modal v-model="isshow_examine" title="审核" centered width="45%"  @ok="examineSave" @cancel="examineCancel">
      <a-form-model class="pollutionForm" :model="examineFrom" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" ref="ruleForm" :rules="rules">
        <a-form-model-item label="审核状态">
          <a-radio-group name="radioGroup" v-model="examineFrom.isAgree" style="margin-left: 30px">
            <a-radio :value="true" style="color: #fff"> 通过</a-radio>
            <a-radio :value="false" style="margin-left: 50px; color: #fff">驳回</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="审核意见" prop="opinion">
          <a-textarea placeholder="请输入审核意见" :rows="6" v-model="examineFrom.opinion" style="margin-left: 30px; color: #fff"/>
        </a-form-model-item>
<!--        <a-row>-->
<!--          <a-col :span="20">-->
<!--            <a-button class="btn" type="primary" @click="examineSave" style="margin-left: 300px">确认</a-button>-->
<!--            <a-button class="btn" type="danger" @click="examineCancel" style="margin-left: 90px">取消</a-button>-->
<!--          </a-col>-->
<!--        </a-row>-->
      </a-form-model>
    </a-modal>
    <!-- 填写采购信息 -->

  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import {number} from "echarts/lib/export";

const EditableCell = {
  template: `
    <a-input :title="value" :disabled="isDisabled" :default-value="value" class="input_style" :value="value" @change="handleChange"/>
  `,
  props: ['text', 'isDisabled'],
  data() {
    return {
      value: this.text,
    };
  },
  methods: {
    handleChange(e) {
      const value = e.target.value;
      this.value = value;
      this.$emit("change", this.value);
    },
    updateAction() {
      this.$forceUpdate()
    }
  },
};
const autoInput = {
  template: `
    <a-auto-complete
        :title="valueInfo"
        :disabled="isDisabled"
        ref="autoComplete"
        :default-value="valueInfo"
        style="background-color: transparent !important;outline: none !important;border: none !important;"
        class="input_style"
        @select="onAutoDataSourceSelect"
        @change="onAutoDataSourceSearch">
    <template slot="dataSource">
      <a-select-option v-for="(autoItem,_index) in autoDataSource" :key="autoItem.id" :title="autoItem.name+'('+autoItem.version+')'">{{ autoItem.name }}({{ autoItem.version }})</a-select-option>
    </template>
    </a-auto-complete>
  `,
  props: ['autoDataSourceInfo', 'valueInfo', 'isDisabled'],
  data() {
    return {
      value: this.valueInfo,
      autoDataSource: this.autoDataSourceInfo,
      autoDataSourceOf: this.autoDataSourceInfo
    };
  },
  methods: {
    onAutoDataSourceSelect(value) {
      this.autoDataSourceOf.forEach(item => {
        if (item.id === value) {
          this.value = item.name
          console.log(item)
          this.$emit("change", item);
          this.$refs.autoComplete.focus();
          this.$forceUpdate()
          return false;
        }
      })
    },
    onAutoDataSourceSearch(value) {
      if (value.length === 0) {
        this.autoDataSource = this.autoDataSourceOf
      } else {
        // this.$emit("change", value);
        let _array = [];
        this.$emit("change", {name:value});
        this.autoDataSourceOf.forEach(item => {
          if (item.name.indexOf(value) != -1) {
            _array.push(item)
          }else {

          }
        })
        this.autoDataSource = _array;
      }
    },
  },
};
export default {
  name: "y-history",
  data() {
    return {
      rules:{
        opinion:[{ required: true, message: '审核意见必填', trigger: 'blur' },]
      },
      isApply:false,
      isDisabled: true,
      autoDataSourceShow: false,
      autoDataSource: [],
      autoDataSourceOf: [],
      lclist: [],
      buyinfo: {},
      // isshow_buyinfo: false,
      isshow_applyinfo: false,
      applyinfo: {},
      demoList: [],
      examineFrom:{
        id: "",
        userId: this.$user.id,
        isAgree: true,  // 审核
        opinion: "",  // 审核意见
        status: "",
      },
      isshow_examine: false,
      isshow_info: true,
      isshow_add: true,
      title: "",
      moment,
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 20,
      },
      form: {
        id: "",
        name: "",
        areaId: "",
        userId: "",
        typeId: "",
        userTime: moment(),
        applyTime: moment(),
        notes: "",
        saleAgreement: "",
        procuListSaveDtoList: [],
        procuListEditDtoList: [],
        procuAuditInfoPos: [],
      },
      ischange: 0,
      procurementList: {
        currentPage: 1,
        pageSize: 10,
        userId: this.$user.id,
        statusList: [0],
        searchKey: "",
      },
      tags: [
        {
          key: [0],
          name: "待审核",
        },
        {
          key: [2, 3, 4, 5],
          name: "审核中",
        },
        {
          key: [1],
          name: "驳回",
        },
        {
          key: [6],
          name: "待采购",
        },
        {
          key: [7],
          name: "已采购",
        },
      ],
      leixing: [],
      isPeople: false,
      isshow: true, //是否为列表
      istable: false, //是否为表格
      isdetail: false,
      details: {}, //详细
      detaildata: [],
      pending: [],
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          width: "5%",
          align: "center",
          ellipsis: true,
          customRender: (text, record, index) =>
              `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "批次号",
          width: "7%",
          ellipsis: "true",
          dataIndex: "serialNumber",
          align: "center",
        },
        {
          title: "申请信息",
          width: "18%",
          ellipsis: "true",
          dataIndex: "name",
          align: "center",
        },
        {
          title: "审请地区",
          width: "10%",
          dataIndex: "areaName",
          align: "center",
        },


        /* {
            title: "审请状态",
            width: "10%",
            dataIndex: "statusName",
            align: "center",
          }, */

      ],
      columnsOf:[
        {
          title: "序号",
          // dataIndex: "id",
          width: "5%",
          align: "center",
          ellipsis: true,
          customRender: (text, record, index) =>
            `${(this.current - 1) * this.size + index + 1}`
        },
        {
          title: "批次号",
          width: "7%",
          ellipsis: "true",
          dataIndex: "serialNumber",
          align: "center",
        },
        {
          title: "申请信息",
          width: "18%",
          ellipsis: "true",
          dataIndex: "name",
          align: "center",
        },
        {
          title: "审请地区",
          width: "10%",
          dataIndex: "areaName",
          align: "center",
        },
        {
          title: "采购数量",
          width: "70px",
          dataIndex: "number",
          align: "center",
        },
        /* {
            title: "审请状态",
            width: "10%",
            dataIndex: "statusName",
            align: "center",
          }, */

      ],
      other: [
        {
          title: "序号",
          dataIndex: "id",
          width: "10%",
          align: "center",
          ellipsis: true,
          customRender: (text, record, index) =>
              `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "名称",
          width: "10%",
          dataIndex: "name",
          align: "center",
        },
        {
          title: "采购类型",
          width: "10%",
          dataIndex: "typeName",
          align: "center",
        },

        {
          title: "申请人",
          dataIndex: "nickname",
          scopedSlots: {
            customRender: "notOutboundAmount",
          },
          align: "center",
          width: "8%",
        },
        {
          title: "申请时间",
          dataIndex: "applyTime",
          scopedSlots: {
            customRender: "outboundAmount",
          },
          align: "center",
          width: "8%",
        },

        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: {
            customRender: "action",
          },
          width: "20%",
          align: "center",
        },
      ],
      current: 1,
      size: 10,
      total: 0,
      totalA: 0,
      userId: "",
      count: 1,
      newData: {},
      dataSource: [],
      deptList: [],
      value: 1,
      columnsA: [
        {
          title: "序号",
          dataIndex: "id",
          width: "5%",
          align: "center",
          customRender: (text, record, index) =>
              `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "物资名称",
          dataIndex: "name",
          ellipsis: "true",
          align: "center",
          width: "8%",
          scopedSlots: {
            customRender: "name",
          },
        },
        {
          title: "规格型号",
          dataIndex: "version",
          ellipsis: "true",
          align: "center",
          width: "8%",
          scopedSlots: {
            customRender: "version",
          },
        },
        {
          title: "存货编码",
          dataIndex: "code",
          ellipsis: "true",
          align: "center",
          width: "8%",
          scopedSlots: {
            customRender: "code",
          },
        },
        {
          title: "品牌",
          dataIndex: "brand",
          ellipsis: "true",
          align: "center",
          width: "8%",
          scopedSlots: {
            customRender: "brand",
          },
        },
        {
          title: "数量",
          dataIndex: "number",
          align: "center",
          scopedSlots: {
            customRender: "number",
          },
          width: "4.3%",
        },
        {
          title: "单位",
          dataIndex: "unit",
          align: "center",
          scopedSlots: {
            customRender: "unit",
          },
          width: "4.3%",
        },
        {
          title: "采购类别",
          dataIndex: "typeId",
          ellipsis: "true",
          align: "center",
          width: "10%",
          scopedSlots: {
            customRender: "typeId",
          },
        },
        // {
        //     title: "项目部",
        //     dataIndex: "deptName",
        //     ellipsis: "true",
        //     align: "center",
        //     width: "8%",
        //     scopedSlots: {
        //         customRender: "deptName",
        //     },
        // },
        {
          title: "使用时间",
          dataIndex: "useTime",
          ellipsis: "true",
          align: "center",
          width: "12%",
          scopedSlots: {
            customRender: "useTime",
          },
        },
        {
          title: "使用单位",
          dataIndex: "useDept",
          ellipsis: "true",
          align: "center",
          width: "8%",
          scopedSlots: {
            customRender: "useDept",
          },
        },

        {
          title: "备注",
          dataIndex: "notes",
          ellipsis: "true",
          align: "center",
          scopedSlots: {
            customRender: "notes",
          },
        },
      ],
      columnsB: [
        {
          title: "序号",
          dataIndex: "id",
          width: "5%",
          align: "center",
          customRender: (text, record, index) => `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "物资名称",
          dataIndex: "name",
          ellipsis: "true",
          align: "center",
          width: "15%",
          scopedSlots: {
            customRender: "name",
          },
        },
        {
          title: "规格型号",
          dataIndex: "version",
          align: "center",
          width: "15%",
          scopedSlots: {
            customRender: "version",
          },
        },
        {
          title: "品牌",
          dataIndex: "brand",
          ellipsis: "true",
          align: "center",
          width: "15%",
          scopedSlots: {
            customRender: "brand",
          },
        },
        {
          title: "数量",
          dataIndex: "number",
          scopedSlots: {
            customRender: "number",
          },
          width: "4.3%",
        },
        {
          title: "单位",
          dataIndex: "unit",
          scopedSlots: {
            customRender: "unit",
          },
          width: "4.3%",
        },
        {
          title: "大区",
          dataIndex: "areaId",
          scopedSlots: {
            customRender: "areaId",
          },
          width: "4.3%",
        },
        {
          title: "备注",
          dataIndex: "notes",
          align: "center",
          scopedSlots: {
            customRender: "notes",
          },
        },
      ],
    };
  },
  components: {
    EditableCell,
    autoInput
  },
  methods: {
    exportExcel() {
      this.$api.exportApply().then((res) => {
        if (res.data.code == 0) {
          window.open(res.data.data);
        }
      });
    },
    changetime_a(date, dateString) {
      this.buyinfo.fhTime = new Date(dateString).getTime();
    },
    changetime_b(date, dateString) {
      this.buyinfo.dhTime = new Date(dateString).getTime();
    },
    // buySave() {
    //     debugger
    //     // this.isshow_buyinfo = false;
    //     let data = {
    //         procuId: this.demoList.id,
    //         deliveryTime: this.buyinfo.fhTime,
    //         arrivalTime: this.buyinfo.dhTime,
    //         userId: this.$user.id,
    //         notes: this.buyinfo.note,
    //         express: this.buyinfo.number,
    //     };
    //     this.$api.purchaseCompleted(data).then((res) => {
    //         if (res.data.code == 0 && res.data.data) {
    //             this.buyinfo = {};
    //             this.getList();
    //         }
    //     });
    // },
    // buyCancel() {
    //     this.isshow_buyinfo = false;
    // },
    //已采购
    buyBtn(item) {
      console.log(item)
      // this.isshow_buyinfo = true;
      // this.demoList = item;
      let then = this;
      this.$confirm({
        title: '是否采购入库?',
        onOk() {
          then.$api.procurementSaveGoods({idList: [item.id]}).then(res => {
            if (res.data.code == 0) {
              then.getList();
              then.$message.info(res.data.errorMessage);
            } else {
              then.$message.info(res.data.errorMessage)
            }
          })
        },
        onCancel() {
          return;
        },
      });
    },
    examineSave() {
    this.$refs.ruleForm.validate(valid=>{
      if(valid){

        this.examineFrom.id = this.demoList.id;
        this.examineFrom.status = this.demoList.status;
        console.log(this.examineFrom)
        this.$api.onReport_z(this.examineFrom).then((res) => {
          if(res.data.data === true){
            this.isshow_examine = false;
            this.examineFrom={
              id: "",
              userId: this.$user.id,
              isAgree: true,  // 审核
              opinion: "",  // 审核意见
              status: "",
            };
            this.getList();
          }
        });
      }
    })

    },
    examineCancel() {
      this.examineCon = "";
      this.isshow_examine = false;
    },
    newClaim() {
      this.isDisabled = false
      this.autoDataSource = this._autoDataSource
      this.isshow_applyinfo = false;
      this.isshow_add = true;
      this.isshow_info = true;
      this.title = "新建申领";

      (this.isshow = !this.isshow), (this.istable = !this.istable);
      if (this.isshow) {
        this.title = "";
      }
      if (!this.title) {
        this.form = {};
        this.dataSource = [];
      }
    },
    newClaimA() {
      (this.isshow = !this.isshow), (this.istable = !this.istable);
      if (this.isshow) {
        this.title = "";
      }
      if (!this.title) {
        this.form = {};
        this.dataSource = [];
      }
    },
    backTable() {
      this.isdetail = false;
      this.isshow = true;
      this.title = "";
    },
    //新增行
    addNew() {
      const {count, dataSource} = this;
      this.newData = {
        key: count,
        name: "",
        version: "",
        brand: "",
        number: "",
        unit: "",
        typeId: "1344454595944804353",
        deptName: "",
        useTime: moment().add(7,"d"),
        useDept: "",
        notes: "",
      };


      this.dataSource = [...dataSource, this.newData];
      this.count = count + 1;
    },
    //删除行
    onDelete(key,index) {
      this.dataSource.splice(index,1)
      // console.log(index)
      // const dataSource = [...this.dataSource];
      // this.dataSource = dataSource.filter((item) => item.key !== key);
      // console.log(this.dataSource)
    },
    //tab切换
    changeTag(i, item) {
      this.ischange = i;
      this.procurementList.statusList = [];
      this.procurementList.statusList = item.key;
      this.procurementList.userId = this.$user.id;
      this.getList();
    },
    //数据列表
    getList() {
      let action= {
            title: "操作",
            dataIndex: "",
            key: "x",
            scopedSlots: {
              customRender: "action",
            },
            width: "140px",
            align: "center",
          }
      this.columns=[...this.columnsOf]

      if(this.procurementList.statusList==7){
      this.columns.push({
        title: "入库时间",
        width: "10%",
        dataIndex: "endTime",
        align: "center",
      })
    }
      this.columns.push(action)
      console.log(this.columns)
      this.$api.getApplyCenterData(this.procurementList).then((res) => {
        this.pending = [];
        res.data.data.records.forEach((item) => {

         if(item.applyTime !=null){
           item.applyTime = moment(item.applyTime).format("YYYY/MM/DD");
        }
          if(item.endTime !=null){
            item.endTime = moment(item.endTime).format("YYYY/MM/DD");
          }

          /* if (item.status == 0) {
              item.statusName = "待审核";
            } else if (item.status == 1) {
              item.statusName = "驳回";
            } else if (item.status == 2) {
              item.statusName = "经理审核";
            } else if (item.status == 6) {
              item.statusName = "总经理审核";
            } else if (item.status == 7) {
              item.statusName = "采购完成";
            } */
        });
        this.totalA = res.data.data.total;
        this.pending = res.data.data.records;
        // this.procurementList.searchKey = "";
      });
    },
    deleteBtn(item) {
      this.$api.deleteList(item.id).then((res) => {
        this.getList();
      });
    },
    searchKey() {
      this.getList();
    },
    getDetail(item) {
      console.log(item)

      var _this = this;
      this.isDisabled = true
      this.isshow_add = false;
      this.isshow_info = false;
      this.isshow = false;
      this.isdetail = false;
      this.istable = true;
      this.$api.lookListDetail(item.id).then((res) => {
        let form = res.data.data.procuListInfoSearchPos;
        form.forEach((item, index) => {
          if(item.applyTime!=null){
            item.applyTime = moment(item.applyTime);
          }
          if(item.useTime!=null){
            item.useTime = moment(item.useTime);
          }
          item.key = index + 1;
        });
        console.log(form)
        _this.dataSource = form;
        _this.form.procuListEditDtoList = form;
        if (item.status != 0) {
          _this.applyinfo = res.data.data.procuAuditInfoPos;
          _this.getlcinfo(item.id);
        } else {
          _this.isshow_applyinfo = false;
        }
      });
    },
    getlcinfo(id) {
      var _this = this;
      this.$api.lcinfo(id).then((res) => {
        _this.lclist = res.data.data;
        _this.lclist.forEach((item, index) => {
          item.time = moment(item.time).format("YYYY-MM-DD");
        });
        _this.isshow_applyinfo = true;
        console.log(_this.lclist);
      });
    },
    //修改数据==>先传递值（调用接口）
    changeDate(item) {
      this.isDisabled = false
      var _this = this;
      this.isshow_applyinfo = false;
      this.isshow_add = false;
      this.isshow_info = true;
      this.isshow = false;
      this.isdetail = false;
      this.istable = true;
      this.title = "修改";
      this.form.id = item.id;
      this.form.status = item.status;
      this.$api.lookListDetail(item.id).then((res) => {
        let form = res.data.data.procuListInfoSearchPos;
        form.forEach((item, index) => {

          if(item.applyTime!=null){
            item.applyTime = moment(item.applyTime);
          }
          if(item.useTime!=null){
            item.useTime = moment(item.useTime);
          }
          item.key = index + 1;
        });

        _this.dataSource = form;
        _this.form.procuListEditDtoList = form;
      });
    },
    examineBtn(item) {
      this.isshow_examine = true;
      this.demoList = item;
    },
    //日期方法
    // dateChange(date, dateString) {
    //   this.form.applyTime = moment(dateString).valueOf();
    // },
    //确认上报按钮
    sureLoad() {
      var _this = this;
      this.form.applyTime = new Date(this.form.applyTime).getTime();
      this.form.userId = this.$user.id;
      this.form.areaId = this.$user.deptId;

      if (this.title == "修改") {
        let form = JSON.parse(JSON.stringify(this.form))
        for (let i = 0; i < form.procuListEditDtoList.length; i++) {

          if (typeof form.procuListEditDtoList[i].useTime != "number") {
            form.procuListEditDtoList[i].useTime = new Date(
                form.procuListEditDtoList[i].useTime
            ).getTime();
          }
        }
        this.$api.modifyList(form).then((res) =>{
          if (res.data.code == 0) {
            _this.form = {
              id: "",
              applyTime: moment(),
            };
            _this.dataSource = [];
            _this.$message.info("修改成功");
            _this.newClaim();
            _this.getList();
          }
          // this.form = {};
          // this.dataSource = [];
        });
      }

      if (this.title == "新建申领") {
        if (this.form.procuListSaveDtoList.length === 0) {
          return this.$message.info("请填写采购物资名称、规格型号及数量");
        }
        let istrue = this.form.procuListSaveDtoList.some(item=>{
          if(item.name==""||item.number == ""||item.unit==""||item.typeId==""){
            this.$message.info("请填写采购物资名称、规格型号、数量及采购类别");
            return true
          }
        })
        if(istrue === true)return;
        let form = JSON.parse(JSON.stringify(this.form))
        form.procuListSaveDtoList.forEach(item => {
          item.useTime = new Date(item.useTime).getTime();
        })

        this.$api.saveProcurement(form).then((res) => {
          _this.form = {
            id: "",
            applyTime: moment(),
          };
          _this.dataSource = [];
          _this.newClaim();
          _this.getList();
        });
      }
    },
    //采购类别
    getType() {
      this.$api.lookLeixing().then((res) => {
        this.leixing = res.data.data;
        console.log(this.leixing)
      });
    },

    //获取区域名
    getDept() {
      this.$api.AreaFindByPage(this.$user.id).then((res) => {
        if (res.data.code == 0) {
          let data = res.data.data;
          let _list = this.createIterator(data);
          this.deptList = _list;
        } else {
          this.$message.info(res.data.errorMessage);
        }
      });
    },
    //处理区域数据
    createIterator(items) {
      items.forEach((res) => {
        // res.scopedSlots = {
        //   title: "custom",
        // };
        if (res.menuList && res.menuList.length > 0) {
          return this.createIterator(res.menuList);
        }
      });
      return items;
    },
    //表格内容
    oninput(key, dataIndex, value) {
      console.log(...arguments)
      this.dataSource.forEach(item => {
        if (item.key === key) {
          if (dataIndex === "name") {
            item.name = value.name
            item.code = value.code
            item.version = value.version
            item.unit = value.unit
            // this.autoDataSourceShow = false
            // this.$nextTick(() => {
            //   this.autoDataSourceShow = true
            // })
          } else {
            item[dataIndex] = value;
          }
        }
      })
      // this.dataSource = this.dataSource
      if (this.title == "新建申领") {
        // this.$set(this.form,procuListSaveDtoList,this.dataSource)
        this.form.procuListSaveDtoList = this.dataSource;
      }

      if (this.title == "修改") {
        this.form.procuListEditDtoList = this.dataSource;
      }
      this.$forceUpdate()
    },
    //重新填写内容
    clearClaim() {
      (this.form = {}), (this.dataSource = []);
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return<a > 上一页 < /a>;
      } else if (type === "next") {
        return<a > 下一页 < /a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.procurementList.currentPage = page;
      this.getList();
    },
    getAutoList(value = '') {
      this.$api.findProcurement({
        currentPage: 1,
        pageSize: 1000,
        searchKey: value
      }).then(res => {
        if (res.data.data && res.data.data.records) {
          res.data.data.records.forEach(item => {
            item.name = item.name.replace(/(^\s*)|(\s*$)/g, "")
          })
          this.autoDataSource = res.data.data.records
          this._autoDataSource = res.data.data.records
          this.autoDataSourceShow = true
        }

      })
    },
  },
  mounted() {
    // this.export();
    this.getList();
    this.getDept();
    this.getType();
    this.getAutoList();
    this.$api.procurementIsSave().then(res=>{
      if(res.data.code === 0){
        this.isApply = res.data.data;
      }
    })
  },
};

</script>
<style lang='scss'>
.claim_div {
  .ant-table-fixed-header .ant-table-scroll .ant-table-header {
    margin-bottom: 0px !important;
  }
}

.ant-popover-message-title {
  color: white;
}
</style>

<style lang='scss' scoped>
.solvebtn {
  display: inline-block;
  margin: 0 10px;
  color: #9fb043;
}
.detailsul{
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  &::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    border: 1px solid #207064;
  }

  &::-webkit-scrollbar-thumb {
    //border-radius: 10px;
    background-color: #207064;
  }

  &::-webkit-scrollbar-track {
    border-radius: 0;
    background: transparent;
  }

  &::-webkit-scrollbar-corner {
    width: 0;
    height: 0;
    background: transparent;
  }
  .detailsli {
    display: inline-block;
    width: 250px;
    margin-right: 20px;
    background: #206056;
    height: 180px;
    border-radius: 10px;
    white-space: normal;
    vertical-align: top;
  }
}


::v-deep .ant-table-bordered.ant-table-empty .ant-table-placeholder {
  border-right: 1px solid #207064;
  border-left: 1px solid #207064;
}

.ischange {
  color: #37ddc0 !important;
  border-bottom: 1px solid #37ddc0;
}

.changetags {
  color: #6f8a86;
}

.tags {
  height: 100%;

  li {
    line-height: 40px;
    margin-right: 15px;
    cursor: pointer;
  }
}

.bootom_btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: 0;
  bottom: 50px;
  .btn {
    margin: 0 15px;
  }
}

.deleteBtn {
  position: absolute;
  color: #37ddc0;
  right: 5px;
  font-size: 20px;
}

::v-deep .input_style {
  background-color: transparent !important;
  outline: none !important;
  border: none !important;
}

.y-history {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  position: relative;
}

.y-history .from-item__class {
  color: rgba(255, 255, 255, 0.7);
}

.content-bottom {
  margin-top: 24px;
  width: 100%;
}

.page-box {
  position: absolute;
  right: 1%;
  bottom: 45px;
}

.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}

::v-deep.y-history .ant-form-item {
  margin-bottom: 0;
}

::v-deep.ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 表格样式 */
.handle {
  width: 100%;
  color: #207064;
  display: flex;
  justify-content: space-between;
}

.handle > span:hover {
  cursor: pointer;
  color: aquamarine;
}

::v-deep.y-history .ant-table table {
  border-radius: 0;
  border: 1px solid #207064;
}

::v-deep.y-history .ant-table-thead > tr > th {
  background-color: #207064;
  color: #9fb043;
  font-size: 16px;
  border-bottom: 0;
  border-radius: 0;
  border: none;
}

::v-deep.y-history .ant-table-tbody > tr > td {
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid #2c6a60;
  padding: 0px;
  height: 35px;
}

::v-deep.y-history .ant-table-tbody > tr:hover > td {
  background-color: transparent !important;
}

::v-deep.y-history .ant-table-tbody > tr.ant-table-row-selected td {
  background-color: transparent;
}

::v-deep.y-history .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #37ddc0;
}

::v-deep.y-history .ant-checkbox-inner {
  border: 1px solid #37ddc0;
  background-color: #8cb3ae;
}

::v-deep.y-history .ant-checkbox-checked .ant-checkbox-inner::after {
  border: 2px solid #37ddc0;
  border-top: 0;
  border-left: 0;
}

::v-deep .ant-table-tbody > tr > td {
  border-bottom: 1px solid #207064;
}

::v-deep .ant-table-thead > tr > th {
  border-bottom: 1px solid #207064;
}

::v-deep .ant-pagination {
  color: rgba(255, 255, 255, 0.7);
}

/* 分页 */
::v-deep.y-history .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}

.ant-input[disabled] {
  color: #37ddc0 !important;
  background-color: #2c4945;
  cursor: text
}

::v-deep .ant-calendar-picker-input.ant-input {
  color: #37ddc0 !important;
  background-color: #2c4945 !important;
  cursor: text
}

.ant-select-auto-complete.ant-select .ant-input {
  color: #37ddc0 !important;
  cursor: text
}

::v-deep .ant-select-auto-complete.ant-select .ant-input[disabled] {
  color: #37ddc0 !important;
  cursor: text
}
</style>
